<template>
  <div>
    <p>高德地图</p>
    <div id="map" style="width:1000px; height:600px"></div>
  </div>
</template>
<script>
import MapLoader from "@/utils/amap" // 引入高德地图
export default {
  name: "amap",
  data() {
    return {
      map: null,
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 初始化地图对象，加载地图
      MapLoader()
        .then((AMap) => {
          const mapZ = new AMap.Map("map", {
            // zomm: 17,
            resizeEnable: true,
          })

          const options = {
            showButton: true, // 是否显示定位按钮
            buttonPosition: "LB", // 定位按钮的位置
            /* LT LB RT RB */
            buttonOffset: new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
            showMarker: true, // 是否显示定位点
            markerOptions: {
              // 自定义定位点样式，同Marker的Options
              offset: new AMap.Pixel(-18, -36),
              content: '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>',
            },
            showCircle: true, //是否显示定位精度圈
            circleOptions: {
              //定位精度圈的样式
              strokeColor: "#0093FF",
              noSelect: true,
              strokeOpacity: 0.5,
              strokeWeight: 1,
              fillColor: "#02B0FF",
              fillOpacity: 0.25,
            },
          }
          // AMap.plugin(["AMap.Geolocation"], function() {
          //   var geolocation = new AMap.Geolocation(options)
          //   mapZ.addControl(geolocation)
          //   geolocation.getCurrentPosition()
          // })
          AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.OverView", "AMap.MapType", "AMap.Geolocation"], function() {
            // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
            mapZ.addControl(new AMap.ToolBar())

            // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
            mapZ.addControl(new AMap.Scale())

            // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
            mapZ.addControl(new AMap.OverView({ isOpen: true }))

            // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
            mapZ.addControl(new AMap.MapType())

            // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
            mapZ.addControl(new AMap.Geolocation(options))
          })
        })
        .catch((err) => {
          console.log(err + "地图加载失败")
        })
    },
    createAmap() {},
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
